<template>

  <!-- 网易头部图片 -->
  <!-- <div class="imgWrap">
     <img src="../../assets/image/app.png" alt="">
</div> -->
  <div class="category" style="#fff">
    <!-- 搜索框 -->
    <div class="search">
      <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" />
    </div>
    <!-- 底部样式 -->
    <div class="main">
      <van-sidebar v-model="activeKey" class="left">
        <van-sidebar-item title="为你推荐" />
        <van-sidebar-item title="居家生活" />
        <van-sidebar-item title="宠物生活" />
        <van-sidebar-item title="服饰鞋包" />
        <van-sidebar-item title="美食酒水" />
        <van-sidebar-item title="个护清洁" />
        <van-sidebar-item title="母婴亲子" />
        <van-sidebar-item title="运动旅行" />
        <van-sidebar-item title="数码家电" />
        <van-sidebar-item title="严选全球" />
      </van-sidebar>
      <!-- 右侧商品展示 -->
      <div class="right">
        <!-- 右侧上部分图片 -->
        <img src="../../assets/image/shafa.png" alt="" class="headerImage" />
        <!-- 下部分分类列表 -->
        <div class="textList">
          <p class="title">床品件套</p>
        </div>
        <!-- 商品图片 -->
        <div class="imgList">
          <div v-for="item in 4" :key="item">
            <img src="../../assets/image/dog.jpg" alt="" />
            <p>换季清仓</p>
          </div>
       
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import { Sidebar, SidebarItem } from "vant";

Vue.use(Search);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
    };
  },
};
</script>
<style lang="less" scoped>
.category {
  width: 100%;
  height: 100%;

  .search {
    width: 375px;
    height: 44px;
  }
  .main {
    height: 550px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;

    .left {
      width: 81px;
      height: 550px;
      flex-direction: column;
      border-right: 1px solid #bbb;

      .van-sidebar-item {
        width: 81px;
        height: 48px;
        background: #fff;
        font-size: 14px;
        line-height: 14px;
      }
    }

    .right {
      height: 550px;
      width: 264px;
      flex: 3;

      .headerImage {
        display: block;
        margin: 15px auto;
        width: 264px;
        height: 96px;
      }

      .title {
        font-size: 12px;
        font-weight: 700;
        padding-bottom: 3px;
        margin-bottom: 9px;
        border-bottom: 1px solid #bbb;
        width: 264px;
        margin: 15px auto;
      }

      .imgList {
        height: 550px;
        width: 281px;
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        div {
          height: 108px;
          width: 72px;
          margin-right: 11px;
          img {
            width: 72px;
            height: 72px;
          }
          p {
            height: 36px;
            width: 72px;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>

